﻿@using Microsoft.FluentUI.AspNetCore.Components.Extensions

<FluentGrid>
    @* SelectMode: Single *@
    <FluentGridItem>
        <FluentLabel>Single</FluentLabel>
        <FluentCalendar DisabledDateFunc="@DisabledDay"
                        @bind-Value="@SelectedDay"
                        SelectMode="CalendarSelectMode.Single" />
        <p>Selected days: @SelectedDay?.ToShortDateString()</p>
    </FluentGridItem>

    @* SelectMode: Range *@
    <FluentGridItem>
        <FluentLabel>Range</FluentLabel>
        <FluentCalendar DisabledDateFunc="@DisabledDay"
                        @bind-SelectedDates="@SelectedRange"
                        SelectMode="CalendarSelectMode.Range" />
        <p>Selected days: @DisplaySelectedDays(SelectedRange)</p>
    </FluentGridItem>

    @* SelectMode: Range + SelectDatesHover *@
    <FluentGridItem>
        <FluentLabel>Range with "SelectOneWeek"</FluentLabel>
        <FluentCalendar DisabledDateFunc="@DisabledDay"
                        @bind-SelectedDates="@SelectedRangeCustomized"
                        SelectDatesHover="@SelectOneWeek"
                        SelectMode="CalendarSelectMode.Range" />
        <p>Selected days: @DisplaySelectedDays(SelectedRangeCustomized)</p>
    </FluentGridItem>

    @* SelectMode: Multiple + Validation *@
    <FluentGridItem>
        <FluentLabel>Multiple (max 5 days)</FluentLabel>
        <FluentCalendar DisabledDateFunc="@DisabledDay"
                        @bind-SelectedDates="@SelectedDays"
                        @bind-SelectedDates:after="@ValidateSelectedDays"
                        SelectMode="CalendarSelectMode.Multiple" />
        <FluentMessageBar Visible="@DisplayError" Intent="MessageIntent.Error" Style="width: 230px;">
            You can select a maximum of 5 days. Delete a day to select a new one.
        </FluentMessageBar>
        <p>Selected days: @DisplaySelectedDays(SelectedDays)</p>
    </FluentGridItem>

    @* SelectMode: Multiple + SelectDatesHover *@
    <FluentGridItem>
        <FluentLabel>Multiple with "Select3Days"</FluentLabel>
        <FluentCalendar DisabledDateFunc="@DisabledDay"
                        @bind-SelectedDates="@SelectedDaysCustomized"
                        SelectDatesHover="@Select3Days"
                        SelectMode="CalendarSelectMode.Multiple" />
        <p>Selected days: @DisplaySelectedDays(SelectedDaysCustomized)</p>
    </FluentGridItem>
</FluentGrid>

@code
{
    private DateTime? SelectedDay = null;
    private IEnumerable<DateTime> SelectedRange = new List<DateTime>();
    private IEnumerable<DateTime> SelectedRangeCustomized = new List<DateTime>();
    private IEnumerable<DateTime> SelectedDays = new List<DateTime>();
    private IEnumerable<DateTime> SelectedDaysCustomized = new List<DateTime>();
    private bool DisplayError = false;

    // Disable all days with the day number 3, 8, and 20.
    private bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20;

    // Display an error when the number of selected days is more than 5.
    private void ValidateSelectedDays()
    {
        if (SelectedDays.Count() > 5)
        {
            SelectedDays = SelectedDays.Except(new[] { SelectedDays.Last() });
            DisplayError = true;
        }
        else
        {
            DisplayError = false;
        }
    }

    // Always select the full week, containing the "clicked" day.
    private IEnumerable<DateTime> SelectOneWeek(DateTime date)
    {
        return new[] { date.StartOfWeek(), date.StartOfWeek().AddDays(6) };
    }

    // Always select 3 days, from the "clicked" day.
    private IEnumerable<DateTime> Select3Days(DateTime date)
    {
        return Enumerable.Range(0, 3).Select(i => date.AddDays(i));
    }

    // Display the selected days in a list.
    private RenderFragment DisplaySelectedDays(IEnumerable<DateTime> days) => builder =>
    {
        builder.OpenElement(0, "ul");
        foreach (var day in days)
        {
            builder.OpenElement(1, "li");
            builder.AddContent(2, day.ToShortDateString());
            builder.CloseElement();
        }
        builder.CloseElement();
    };
}
